<template lang="pug">
  .page-container.slide-container(id="container" @scroll="scrollFn")
    .slide-page.page.page-zero(class="bac-image" id="home")
      .backer(:style="{opacity: 0.5 - scrollNum}")
      .imager(v-if="showImager" v-animate-css="logoFadeAni" :style="{backgroundImage: `url(${bgNotebook})`}")
      .head.box.box-y-center
        .left
          img(src="static/logo2.png")
        .right.box-col-flex.box-x-right.pc-box
          li(@click="scrollTo('home')") HOME
          li(@click="scrollTo('service')") SERVICE
          li(@click="scrollTo('aboutus')") ABOUT US
          li(@click="scrollTo('member')") MEMBER
          li(@click="scrollTo('product')") PRODUCT
          li(@click="scrollTo('contact')") CONTACT
        .right.box-col-flex.box-x-right.mobile-box(@click="scrollToBottom")
          i.iconfont &#xe60d;
      writer(:text="writeText" @writeOver="writeOver=true" class="writer" style="min-height: 200px")
      .btn.box.box-item.cursor(v-if="!writeOver" @click="nextPage") KNOW MORE
      .btn.box.box-item.cursor(v-else @click="nextPage" v-animate-css="btnAni") KNOW MORE
    .slide-page.page.page-one(id="service")
      .title.box.box-item 
        span SERVICE
      ul.box.box-item.box-wrap
        li(v-for="(item, key) in serviceArr" :key="key" v-animate-css.once="getAnimate(key)" v-if="renderedPages.indexOf(2) !== -1")
          .img-con.box.box-item
            img(:src="item.img")
          .c-title.box.box-item {{ item.title }}
          p.box.box-item(v-for="(p, pKey) in item.textArr" :key="pKey") {{ p.text }}
    .slide-page.page.page-two(id="aboutus")
      .title.box.box-item 
        span ABOUT US
      .con.box.box-wrap
        .left
          .aniLeft(v-animate-css="logoLeftAni" v-if="renderedPages.indexOf(3) !== -1")
            h1.pc-box SHAN
            h1.pc-box YU-ORG
            h1.mobile-box.box-item SHANYU-ORG
            h3 闪鱼科技
          .aniLeft(v-animate-css="addressLeftAni" v-if="renderedPages.indexOf(3) !== -1")
            p 深圳市罗湖区东门中路 2002号江南大厦
            p +86 18026959737
            p shanyu01@aliyun.com
        .right
          .aniRight(v-animate-css="logoRightAni" v-if="renderedPages.indexOf(3) !== -1")
            p 一家专业从事互联网服务的信息技术公司，公司拥有专业的策划/设计/前后端开发工程师。 核心工程师曾在北上广等大型公司任职。
            p 公司致力于为广大客户提供项目解决方案和优质服务，从技术、战略、资本各方面提供全方位的创新服务， 帮助企业互联网化升级。
            p 我们深刻理解国际前沿设计趋势、对流程的互联网站点和软件应用有深刻认识、 在开发领域有着雄厚技术与实战经验。业务范围平台开发，网站定制，手机应用，互联网金融。
          img(src="static/pages/city.png" v-animate-css="addressRightAni" v-if="renderedPages.indexOf(3) !== -1")
    .slide-page.page.page-three(id="member")
      .title.box.box-item 
        span MEMBER
      ul(v-swipe="{methods: swipeFn}")
        transition(:name='transitionName')
          li(v-for="(item, key) in merberArr" :key="key" v-if="key===activeKey")
            .head-con.box.box-item
              .img(class="bac-image" :style="{backgroundImage: `url('${item.img}')`}")
            h2.box.box-item {{ item.name }}
            p.box.box-item {{ item.text }}
      .dot.box.box-item
        .dot-index(v-for="(item, key) in merberArr" :key="key" :class="{active: key===activeKey}" @click="activeKey=key")
    .slide-page.page.page-four(style="background-image: url('static/pages/ankle.svg')" id="product")
      .title.box.box-item 
        span PRODUCT
      ul.box.box-item.box-wrap
        li(v-for="(item, key) of product" :key="key")
          h3 {{ item.title }}
          p {{ item.text }}
    .slide-page.page.page-five(style="background-image: url('static/pages/sa.jpg')" id="contact")
      .backer(:style="{opacity: scrollNum - 4.5}")
      .img-con.box.box-item
        img(src="static/pages/qrcode.jpg" v-animate-css="logoDownAni" v-if="renderedPages.indexOf(5) !== -1")
      p.box.box-item 详细服务和报价，请扫二维码加入我们的微信服务号进行咨询
      p.box.box-item 或
      p.box.box-item 微信搜索公众号：闪鱼科技
      .bottom(@click="jumpPage")
        p.box.box-item © 深圳闪鱼信息科技有限公司 All Rights Reserved
        p.box.box-item 粤ICP备16053286号
    //- .layer.box-x-right.mobile-box(:class="{active: showLayer}" @click="showLayer=false")
    //-   ul
    //-     li(@click="scrollTo('home')") HOME
    //-     li(@click="scrollTo('service')") SERVICE
    //-     li(@click="scrollTo('aboutus')") ABOUT US
    //-     li(@click="scrollTo('member')") MEMBER
    //-     li(@click="scrollTo('product')") PRODUCT
    //-     li(@click="scrollTo('contact')") CONTACT
</template>
<script>
// import '@/lib/slidePage.js'
import components from '@/components'
import PreLoad from '@/lib/preload'
export default {
  name: 'Home',
  components: {
    ...components,
  },
  data() {
    return {
      bgNotebook: require('../assets/bg_notebook.jpg'),
      showImager: false,
      serviceArr: [
        {
          img: 'static/pages/tool.png',
          title: 'APP开发',
          url: 'Application',
          textArr: [
            {
              text: `各大主流平台Android、iOS、HTML5,原生和混合式开发。专注高端app开发，32道管理流程，5大服务保障体系。`,
            },
          ],
        }, {
          img: 'static/pages/manager.png',
          title: '网站开发',
          url: 'ECommerce',
          textArr: [
            {
              text: `更高效的技术框架，更流畅快速的网页体验，自主研发的代码积累，满足产品功能并带来更好的用户体验。`,
            },
          ],
        }, {
          img: 'static/pages/software.png',
          title: '大数据平台',
          url: 'BigData',
          textArr: [
            {
              text: `大型分布式平台建设，高并发系统架构搭建，海量数据加工处理。丰富的系统架构经验，提供安全性系统解决方案。`,
            },
          ],
        }, {
          img: 'static/pages/wechat.png',
          title: '微信开发',
          url: 'SystemIntegration',
          textArr: [
            {
              text: `我们熟悉微信整套生态环境建设流程，依靠微信强大的传播能力，为您的企业带来成倍的经济效益汇报。`,
            },
          ],
        },
        // {
        //   img: 'static/pages/cmmi.png',
        //   title: 'CMMI认证',
        //   url: 'CMMI',
        //   textArr: [
        //     {
        //       text: `CMMI是一套融合多学科的、`,
        //     }, {
        //       text: `可扩充的产品集合，`,
        //     }, {
        //       text: `其研制的初步动机……`,
        //     },
        //   ],
        // },
      ],
      activeKey: 0,
      transitionName: 'fade',
      merberArr: [
        {
          img: 'static/head/liliqiang.jpg',
          name: '李立强 / 系统架构师',
          text: '顶级JAVA开发工程师，曾任职于LITTA，在互联网金融、教育、AI人工智能领域涉猎很深。',
        },
        {
          img: 'static/head/dd.jpg',
          name: '王俊平 / 项目负责人',
          text: '5年正式工作经验，擅长JAVA、PHP等语言，参与过多项大型互联网项目的架构和研发，有丰富的高并发分布式服务研发经验。',
        },
        {
          img: 'static/head/tizhihen.jpg',
          name: '田志恒 / 移动端开发主管',
          text: '6年多安卓/IOS开发经验，涉及在线教育、医疗健康、企业服务、电子商务、媒体门户、餐饮、体育、社交等多个行业，任职移动端开发主管职务。',
        },
        {
          img: 'static/head/leo.jpg',
          name: 'Leo / 视觉与前端负责人',
          text: '资深WEB开发工程师，曾就职于DSC，在WEB安全、H5 APP开发、小程序开发等领域有很深的研究。',
        },
        {
          img: 'static/head/Lavinia.jpg',
          name: 'Lavinia / 设计总监',
          text: '八年以上互联网工作经验，熟悉互联网平台营销推广，以及各种互联网类型的视觉体验，有传统广告公司设计经验。',
        },
      ],
      logoFadeAni: {
        classes: 'fadeIn',
        duration: 800,
        delay: 300,
      },
      btnAni: {
        classes: 'jello',
        duration: 800,
      },
      logoLeftAni: {
        classes: 'bounceInLeft',
        duration: 400,
      },
      addressLeftAni: {
        classes: 'bounceInLeft',
        duration: 400,
        delay: 800,
      },
      logoRightAni: {
        classes: 'bounceInRight',
        duration: 400,
        delay: 400,
      },
      logoDownAni: {
        classes: 'bounceInUp',
        duration: 1200,
        delay: 400,
      },
      addressRightAni: {
        classes: 'bounceInRight',
        duration: 400,
        delay: 1200,
      },
      slidepage: null,
      activePage: 1,
      writeText: `The most professional <br> Internet service company <br> In Shenzhen`,
      writeOver: false,
      renderedPages: [1],
      scrollNum: 0,
      product: [
        {
          title: '默契大比拼',
          text: '实时在线匹配，了解对方和自己的默契，在娱乐中寻找自己的另一半。默契大比拼，会根据区域星座，爱好，进行相互匹配。好友、基友也可以进行离线默契测试，实时默契测试。不但有默契测试，还有星座运势，还有非常准的算命系统。',
        },
        {
          title: '闪鱼体育',
          text: '闪鱼体育是一款专业体育视频观赛平台客户端。用户可以在这里实时观看体育直播比赛，专业解说为观众实时解读赛事进展，更有超多趣味自制节目，为用户观看比赛带来方便。',
        },
        {
          title: '小姨妹',
          text: '小姨妹app，美女们必备的贴心工具!小姨妹app是一款清新脱俗的月经期管理软件，小姨妹软件可精准预测记录和提醒月经、排卵、黄体期，温暖你经期的每一分钟!小姨妹app旨在让让你长时间免费使用和一辈纸得到零利润的高品质卫生护理用品，是我们的服务宗旨!',
        },
        {
          title: '闲来红包',
          text: '闲来红包，一种轻松愉快得赚钱的方式！闲来红包是我们倾心打造的一种简单高效的手赚平台。无论您是学生、宝妈、白领还是其他职业人员、都可以通过闲来红包轻松赚钱！我们有海量红包想送，拆到手软！支持多种体现方式，微信、支付宝、银行卡任选，提现简单到账快！快来试试吧！',
        },
      ],
      showLayer: false,
    }
  },
  computed: {},
  watch: {
    activeKey(newVal, oldVal) {
      this.transitionName = newVal > oldVal ? 'slide-left' : 'slide-right'
    },
  },
  methods: {
    getAnimate(key) {
      return { classes: 'bounceIn', duration: 600, delay: key * 300 }
    },
    nextPage() {
      this.scrollTo('service')
    },
    scrollFn(e) {
      let targetHeight = e.target.offsetHeight
      let activePage = Math.ceil((e.target.scrollTop + targetHeight * 0.5) / targetHeight)
      this.scrollNum = e.target.scrollTop / targetHeight
      this.activePage = activePage
      if (this.renderedPages.indexOf(activePage) === -1) this.renderedPages.push(activePage)
    },
    scrollTo(name) {
      setTimeout(() => {
        document.getElementById(name).scrollIntoView()
      }, this.showLayer ? 600 : 0)
    },
    scrollToBottom() {
      setTimeout(() => {
        const el = document.getElementById('container')
        el.scrollTop = el.scrollHeight
      }, 0)
    },
    swipeFn(e, arg) {
      let plus = e.direction === 'Right' ? -1 : 1
      let activeKey = this.activeKey
      activeKey = activeKey + plus
      activeKey = activeKey < 0 ? 0 : activeKey
      activeKey = activeKey > this.merberArr.length - 1 ? this.merberArr.length - 1 : activeKey
      this.activeKey = activeKey
    },
    jumpPage() {
      window.open('http://www.miitbeian.gov.cn')
    },
  },
  created() {
    new PreLoad([this.bgNotebook]).init().then(
      () => {
        this.showImager = true
      },
    )
  },
  mounted() {},
}
</script>

<style lang="less" scoped>
  @import url('../theme/index.less');
  .page-container {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background-size: auto 70%;
    background-position: center center;
    scroll-behavior: smooth;
    position: relative;
    .mobile-box{
      display: none;
    }
    .pc-box{
      display: -webkit-box;
      /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
      display: -moz-box;
      /* 老版本语法: Firefox (buggy) */
      display: -ms-flexbox;
      /* 混合版本语法: IE 10 */
      display: -webkit-flex;
      /* 新版本语法: Chrome 21+ */
      display: flex;
    }
    .pc{
      display: block;
    }
    .mobile{
      display: none;
    }
    @media screen and (max-width: 800px) {
      .pc-box{
        display: none;
      }
      .pc{
        display: none;
      }
      .mobile-box{
        display: -webkit-box;
        /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box;
        /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox;
        /* 混合版本语法: IE 10 */
        display: -webkit-flex;
        /* 新版本语法: Chrome 21+ */
        display: flex;
      }
      .mobile{
        display: block;
      }
    }
    .layer{
      position: fixed;
      height: 100vh;
      width: 100vw;
      top: 0;
      bottom: 0;
      left: 100vw;
      transition: all 600ms;
      background: transparent;
      z-index: 1000;
      &.active{
        left: 0;
      }
      ul{
        background: rgba(255, 255, 255, 1);
        width: 70vw;
        padding: 8vw;
        height: 100%;
        padding-top: 5vh;
      }
      li{
        font-size: 3.8vw;
        color: #666c77;
        font-weight: 600;
        margin-bottom: 5vh;
      }
    }
    .page{
      min-height: 100vh;
      padding: 0 100px;
      position: relative;
      @media screen and (max-width: 800px) {
        padding: 0 5vw;
      }
      .backer{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(25, 25, 25, 0.8);
        z-index: 1;
      }
      .imager{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(25, 25, 25, 1);
        background-size: cover;
        background-position: center center;
        z-index: 0;
      }
      // position: absolute;
      // top: 0;
      // bottom: 0;
      // left: 0;
      // right: 0;
    }
    .page-zero{
      padding-top: 30vh;
      background-size: cover;
      background-color: rgba(25, 25, 25, 1);
      .head{
        // height: 12vh;
        position: absolute;
        z-index: 100;
        top: 0;
        left:0;
        right: 0;
        padding:15px 60px;
        // background: rgba(0, 0, 0, 0.3);
        .left{
          font-weight: 700;
          font-size: 1.6rem;
          // width: 60%;
          img{
            height: 7vh;
            position: relative;
            top: 4px;
          }
        }
        .right{
          li{
            margin-left: 1vw;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            padding: 10px 5px;
            color: #ccc;
            transition: all 0.6s;
            text-shadow: 1px 1px 1px #000;
            &:hover{
              color: #fff;
            }
          }
          i{
            color: white;
            font-size: 6vw;
            // margin-top: 3vw;
          }
        }
        @media screen and (max-width: 800px) {
          padding: 1.5vw 5vw;
          .left{
            img{
              height: 6vh;
            }
          }
        }
      }
      .btn{
        // border: 1px solid rgba(255, 255, 255, 0.7);
        padding: 0.8rem;
        width: 8rem;
        color: rgba(255, 255, 255, 0.9);
        margin-top: 50px;
        font-size: 0.8rem;
        position: relative;
        // z-index: 1;
        background: #0facf3;
        font-weight: 600;
        z-index: 10;
        @media screen and (max-width: 800px) {
          margin: auto;
          margin-top: 20vh;
        }
      }
      .writer{
        position: relative;
        z-index: 1;
      }
    }
    .page-one{
      padding: 8vh 100px;
      ul{
        margin-top: 10vh;
        li{
          height: 70vh;
          width: 19vw;
          padding: 0 3vw;
          padding-top: 10vh;
          // margin: 0 2vw;
          .img-con{
            img{
              height: 40px;
            }
          }
          .c-title{
            font-size: 1.1rem;
            margin-top: 5vh;
            margin-bottom: 9vh;
            font-weight: 600;
            letter-spacing: 1px;
          }
          p{
            font-size: 0.9rem;
            line-height: 1.7;
            text-align: justify;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-text-size-adjust: 100%;
            color: #000;
            font-weight: 400;
          }
        }
      }
      @media screen and (max-width: 800px) {
        padding: 5vh 5vw;
        ul{
          margin-top: 8vh;
          li{
            height: auto;
            width: 100%;
            margin: 0 1vw;
            padding: 5vh 3vw;
            padding-bottom: 0;
            margin-bottom: 10vh;
            .img-con{
              img{
                height:14vw;
              }
            }
            .c-title{
              font-size: 4.5vw;
              margin-top: 2vh;
              margin-bottom: 3vh;
              font-weight: 600;
              letter-spacing: 1px;
            }
            p{
              font-size: 3.6vw;
              line-height: 1.7;
              text-align: justify;
              color: #000;
              font-weight: 300;
              padding: 0 6vw;
            }
          }
        }
      }
    }
    .page-two{
      padding: 8vh 15vw;
      .con{
        margin-top: 23vh;
        .left{
          width: 50%;
          h1{
            font-size: 3.5rem;
            line-height: 1;
            font-weight: bold;
          }
          h3{
            margin-top: 3vh;
            margin-bottom: 6vh;
            font-size: 1.2rem;
            font-weight: bold;
          }
          p{
            margin-top: 1vh;
            font-size: 1rem;
          }
        }
        .right{
          width: 50%;
          p{
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 2vh;
            font-weight: 300;
          }
          img{
            width: 100%;
          }
        }
      }
      @media screen and (max-width: 800px) {
        padding: 5vh 5vw;
        .con{
          margin-top: 10vh;
          .left{
            width: 100%;
            h1{
              font-size: 8vw;
              text-align: center;
            }
            h3{
              margin-top: 1vh;
              margin-bottom: 6vh;
              font-size: 5.8vw;
              text-align: center;
            }
            p{
              margin-top: 1vh;
              font-size: 3.6vw;
              font-weight: 600;
              text-align: center;
            }
          }
          .right{
            width: 100%;
            margin-top: 10vh;
            padding: 0 4vw;
            p{
              font-size: 0.95rem;
              line-height: 1.8;
              margin-bottom: 2vh;
              font-weight: 400;
              text-align: center;
              margin-top: 5vh;
            }
            img{
              width: 100%;
            }
          }
        }
      }
    }
    .page-three{
      padding: 8vh 15vw;
      ul{
        margin-top: 20vh;
        position: relative;
        height: 55vh;
        overflow: hidden;
        li{
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          transition: all 0.8s ease;
          .head-con{
            .img{
              width: 12vw;
              height: 12vw;
              border-radius: 100%;
              background-position: center center;
            }
          }
          h2{
            margin-top: 3vh;
            font-size: 1.1rem;
          }
          p{
            margin-top: 5vh;
            font-size: 1rem;
            padding: 0 10vw;
            text-align: center;
          }
        }
      }
      .dot{
        @media screen and (max-width: 800px) {
          margin-top: 7vh;
        }
        .dot-index{
          width: 1.8vh;
          height: 1.8vh;
          border-radius: 100%;
          background: #666;
          margin: 0 1vh;
          border: 2px solid transparent;
          transition: all 0.4s;
          &:hover{
            background: #333;
          }
          &.active{
            border-color: #333;
            background: transparent;
          }
        }
      }
      @media screen and (max-width: 800px) {
        padding: 5vh 3vw;
        ul{
          margin-top: 15vh;
          li{
            .head-con{
              .img{
                width: 42vw;
                height: 42vw;
              }
            }
            h2{
              font-weight: 600;
            }
            p{
              line-height: 1.8;
            }
          }
        }
      }
    }
    .page-four{
      padding: 8vh 5vw;
      background-size: auto 60%;
      background-position: center center;
      // background-repeat: no-repeat;
      ul{
        margin-top: 10vh;
        li{
          width: 20vw;
          height: 60vh;
          background: rgba(245, 245, 245, 0.7);
          margin-left: 5px;
          padding: 1.5vw;
          h3{
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 5vh;
          }
          p{
            font-size: 0.8rem;
            font-weight: 100;
            color: #333;
            line-height: 1.8;
            text-align: justify;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-text-size-adjust: 100%;
          }
        }
      }
      @media screen and (max-width: 800px) {
        padding: 5vh 3vw;
        ul{
          margin-top: 10vh;
          li{
            width: 90vw;
            margin-top: 2vh;
            padding: 4vw;
            height: auto;
            h3{
              font-size: 4.4vw;
              margin-bottom: 3vh;
            }
            p{
              font-size: 3.7vw;
              font-weight: 300;
            }
          }
        }
      }
    }
    .page-five{
      padding: 8vh 15vw;
      background-size: cover;
      background-position: center center;
      .img-con{
        margin-top: 10vh;
        margin-bottom: 5vh;
        position: relative;
        z-index: 1;
        img{
          width: 200px;
        }
      }
      &>p{
        color: #fff;
        margin-top: 1vh;
        font-size: 1rem;
        position: relative;
        z-index: 1;
      }
      .bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8vh;
        z-index: 10;
        p{
          color: white;
          font-size: 0.8rem;
          margin: 0;
          margin-top: 0.4vh;
        }
      }
      @media screen and (max-width: 800px) {
        padding: 2vh 10vw;
        .img-con{
          margin-top: 10vh;
          margin-bottom: 10vh;
          position: relative;
          z-index: 1;
          img{
            width: 50vw;
          }
        }
        p{
          text-align: center;
          margin-bottom: 3vh;
        }
        .bottom{
          text-align: center;
          margin-bottom: 2vh;
          padding: 0 10vw;
          line-height: 1.8;
        }
      }
    }
    .title{
      font-size: 1.8vw;
      font-weight: 700;
      color: #2f2e2e;
      letter-spacing: 1px;
      @media screen and (max-width: 800px) {
        font-size: 5vw;
      }
      span{
        position: relative;
        &:before{
          content: '';
          position: absolute;
          bottom: -1.5vw;
          left: 2.5vw;
          right: 2.5vw;
          height: 3px;
          background: #f59231;
        }
      }
    }
  }

</style>
